<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
	<meta charset="UTF-8">
	<title>文档标题</title>
	<!-- 优先使用 IE 最新版本和 Chrome -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	<!-- 开启响应式 -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
	
	<!-- SEO页面关键词 -->
	<meta name="keywords" content="your keywords" />
	
	<!-- SEO页面描述 -->
	<meta name="description" content="your description" />
	
	<link rel="stylesheet" href="../../../../../usually/bootstrap/2.0/css/bootstrap.min.css">
	<style>
		form.bs-docs-example {
		    padding-bottom: 19px;
		}
		.bs-docs-example {
		    position: relative;
		    margin: 15px 0;
		    padding: 39px 19px 14px;
		    background-color: #fff;
		    border: 1px solid #ddd;
		    -webkit-border-radius: 4px;
		    -moz-border-radius: 4px;
		    border-radius: 4px;
		}
		.btn-primary{
		    float: left;
  			width: 350px;
  			height: 50px;
		}
		.form-horizontal input{
			height: 16px;
			width: 328px;
			padding: 11px 10px;
			margin-right: 10px;
			border: 1px solid #ddd;
			font-size: 14px;
			color: #666;
			transition: .3s;
		}
		.form-horizontal input[type = "checkbox"] {
			width: auto;
			padding: 0;
		}
		.form-horizontal .controls{
			position: relative;
		}
		.form-horizontal .pass-placeholder{
			position: absolute;
			display: inline-block;
			height: 100%;
			line-height: 42px;
			font-size: 14px;
			left: 11px;
			top: 0;
		}
	</style>
</head>
<body>
	<div class="container">
		<!--
			配置：required 不能为空
				  regexp 格式
				  min-length 最小的密码长度

		-->
		<form class="data bs-docs-example form-horizontal">
		  <div class="control-group">
		    <label class="control-label" for="inputUsername">用户名</label>
		    <div class="controls">
		      <input type="text" id="inputUsername" placeholder="请设置用户名"
				data-dr-required="true"
				data-dr-required-message="用户名不能为空"
				data-dr-regexp="^[\u4e00-\u9fa5A-Za-z0-9_\-]+$"
				data-dr-regexp-message="用户名只能包含汉字，字母，数字，-和_">
		      <!--[if lte IE 9]><span class="pass-placeholder">请设置用户名</span><![endif]-->
		    </div>
		  </div>
		  <div class="control-group">
		    <label class="control-label" for="inputPhone">手机号</label>
		    <div class="controls">
		      <input maxlength="11" type="text" id="inputPhone" placeholder="可用于登录和找回密码"
		        data-dr-required="true"
				data-dr-required-message="手机号码不能为空"
				data-dr-regexp="^(13|14|15|18)[0-9]{9}$"
				data-dr-regexp-message="不是合法的手机号">
		    </div>
		  </div>
		  <div class="control-group">
		    <label class="control-label" for="inputPassword">密码</label>
		    <div class="controls">
		      <input type="password" id="inputPassword" placeholder="请设置登录密码"
		        data-dr-required="true"
				data-dr-required-message="密码不能为空"
				data-dr-regexp="^\w+$"
				data-dr-regexp-message="密码必须由数字、字母和_组成"
				data-dr-minlength="6"
				data-dr-minlength-message="密码不能低于6位"
				data-dr-maxlength="16"
				data-dr-maxlength-message="密码不能超过16位">
		    </div>
		  </div>
		  <div class="control-group">
		    <label class="control-label" for="inputLandline">座机号</label>
		    <div class="controls">
		      <input maxlength="11" type="text" id="inputLandline" placeholder="可用于登录和找回密码"
		        data-dr-required="true"
				data-dr-required-message="座机号码不能为空"
				data-dr-landline="^0\d{2,3}-\d{7}$"
				data-dr-landline-message="座机号由区号-座机号组成">
		    </div>
		  </div>
		  <div class="control-group">
		    <div class="controls">
		      <label class="checkbox">
		        <input type="checkbox"
		        data-dr-check="true"
				data-dr-check-message="请勾选“阅读并接受百度用户协议”"
				> 阅读并接受<a href="#">《百度用户协议》</a>及<a href="#">《百度隐私权保护声明》</a>
		      </label>
		      <button type="submit" class="btn btn-primary">注册</button>
		    </div>
		  </div>
		</form>
	</div>
	<script src="../../../../../usually/js/jQuery/jquery-1.11.3.min.js"></script>
	<script src="../../../../../usually/bootstrap/2.0/js/bootstrap.min.js"></script>
	<script src="verification.js"></script>
	<script>
		$(".data").dataVerif( {
			initEvent: "blur"
		} );
		$( function() {
			$.fn.dataVerif.extendPort( {
				landline: function ( data ) {
					return new RegExp( data ).test( this.val() );
				}
			} );
		} );
	</script>
</body>
</html>